<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/12/4
  Time: 15:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>花城-个人信息</title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/pages/Floda/assets/img/favicon.ico" type="image/x-icon" />

    <!-- Google fonts include -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,900%7CYesteryear" rel="stylesheet">

    <!-- All Vendor & plugins CSS include -->
    <link href="${pageContext.request.contextPath}/pages/Floda/assets/css/vendor.css" rel="stylesheet">
    <!-- Main Style CSS -->
    <link href="${pageContext.request.contextPath}/pages/Floda/assets/css/style.css" rel="stylesheet">


<style type="text/css">
        #divUL div{
            float: left;
        }
</style>
    <style>
        #pic_list li{
            margin:2px;
            list-style: none;
            display: inline-block;
        }
    </style>

</head>
<%--<script type="text/javascript">--%>
<%--    $(function () {--%>
<%--        $('ul.message')--%>
<%--    })--%>
<%--</script>--%>
<body>

<!-- Start Header Area -->
<header class="header-area">
    <!-- main header start -->
    <div class="main-header d-none d-lg-block">
        <!-- header top start -->
        <div class="header-top bdr-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="welcome-message">
                            <p>欢迎 ${sessionScope.user.name} 来到花城世界</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header top end -->

        <!-- header middle area start -->
        <div class="header-main-area sticky">
            <div class="container">
                <div class="row align-items-center position-relative">

                    <!-- start logo area -->
                    <div class="col-lg-3">
                        <div class="logo">
                            <a href="index.html">
                                <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/logo/logo.png" alt="">
                            </a>
                        </div>
                    </div>
                    <!-- start logo area -->

                    <!-- main menu area start -->
                    <div class="col-lg-6 position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- main menu navbar start -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li><a href="${pageContext.request.contextPath}/index.jsp">首页</a></li>
                                        <li><a href="${pageContext.request.contextPath}/pages/Floda/shop.jsp">商品</a></li>
                                    </ul>
                                </nav>
                                <!-- main menu navbar end -->
                            </div>
                        </div>
                    </div>
                    <!-- main menu area end -->

                    <!-- mini cart area start -->
                    <div class="col-lg-3">
                        <div class="header-configure-wrapper">
                            <div class="header-configure-area">
                                <ul class="nav justify-content-end">
                                    <li>
                                        <a href="#" class="offcanvas-btn">
                                            <i class="lnr lnr-magnifier"></i>
                                        </a>
                                    </li>
                                    <li class="user-hover">
                                        <a href="#">
                                            <i class="lnr lnr-user"></i>
                                        </a>
                                        <ul class="dropdown-list">
                                            <c:if test="${empty sessionScope.user}">
                                                <li><a href="${pageContext.request.contextPath}/pages/Floda/login.jsp">登录</a></li>
                                                <li><a href="${pageContext.request.contextPath}/pages/Floda/login.jsp">注册</a></li>
                                            </c:if>
                                            <c:if test="${not empty sessionScope.user}">
                                                <li><a href="${pageContext.request.contextPath}/index.jsp.jsp">返回首页</a></li>
                                                <li><a href="${pageContext.request.contextPath}/pages/Floda/login.jsp" id="logout">退出</a></li>
                                            </c:if>

                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="minicart-btn">
                                            <i class="lnr lnr-cart"></i>
                                            <div class="notification">${sessionScope.cart.totalCount}</div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- mini cart area end -->

                </div>
            </div>
        </div>
        <!-- header middle area end -->
    </div>
    <!-- main header start -->

    <!-- mobile header start -->
    <div class="mobile-header d-lg-none d-md-block sticky">
        <!--mobile header top start -->
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12">
                    <div class="mobile-main-header">
                        <div class="mobile-logo">
                            <a href="index.html">
                                <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/logo/logo.png" alt="Brand Logo">
                            </a>
                        </div>
                        <div class="mobile-menu-toggler">
                            <div class="mini-cart-wrap">
                                <a href="#">
                                    <i class="lnr lnr-cart"></i>
                                </a>
                            </div>
                            <div class="mobile-menu-btn">
                                <div class="off-canvas-btn">
                                    <i class="lnr lnr-menu"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- mobile header top start -->
    </div>
    <!-- mobile header end -->
</header>
<!-- end Header Area -->





<!-- main wrapper start -->
<main>
    <!-- breadcrumb area start -->
    <div class="breadcrumb-area common-bg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h1>账号管理</h1>
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/index.jsp" title="返回首页"><i class="fa fa-home"></i></a></li>
                                <li class="breadcrumb-item active" aria-current="page">订单管理</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end -->

    <!-- page main wrapper start -->
    <div class="shop-main-wrapper section-space pb-0">
        <div class="container">
            <div class="row">
                <!-- sidebar area start -->
                <div class="col-lg-3 order-2 order-lg-1">
                    <aside class="sidebar-wrapper">
                        <!-- single sidebar start -->
                        <div class="sidebar-single">
                            <h3 class="sidebar-title">账号管理</h3>
                            <div class="sidebar-body">
                                <ul class="shop-categories">
                                    <li><a href="${pageContext.request.contextPath}/pages/Floda/message.jsp">个人信息</a></li>
                                    <li><a href="${pageContext.request.contextPath}/pages/Floda/order_list.jsp">订单管理</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- single sidebar end -->



                        <!-- single sidebar start -->
                        <div class="sidebar-banner">
                            <div class="img-container">
                                <a href="#">
                                    <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/banner/sidebar-banner.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <!-- single sidebar end -->
                    </aside>
                </div>
                <!-- sidebar area end -->

                <!-- shop main wrapper start -->
                <div class="col-lg-9 order-1 order-lg-2">
                    <div class="shop-product-wrapper target">
                        <!-- shop product top wrap start -->
                        <div class="shop-top-bar">
                            <div class="row align-items-center">
                                <div class="col-lg-7 col-md-6 order-2 order-md-1">
                                    <div class="top-bar-left">
                                        <div class="product-view-mode list-view">
                                            <a class="active" href="" data-target="list-view" data-toggle="tooltip" title="List View"><i class="fa fa-list"></i></a>
                                        </div>
                                        <div class="product-amount">
                                            <p>订单信息</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- shop product top wrap start -->

                        <!-- 订单  开始 -->
                        <div>
                            <!-- 订单项  开始 -->
                            <div style="border: 1px grey solid;margin-bottom: 5px">
                                <div style="background-color: white">
                                    <ul id="pic_list" style="text-align: center">
                                        <li style="width: 180px;text-align: left;float: left">商品名称</li>
                                        <li style="width: 100px">数量</li>
                                        <li style="width: 100px">总价</li>
                                        <li style="width: 200px">订单时间</li>
                                        <li style="width: 70px;float: right">状态</li>
                                    </ul>
                                </div>
                                <div style="background-color: #F0F0F0">
                                    <c:forEach items="${sessionScope.cart.items}" var="cart">
                                        <input type="hidden" name="flowerId" value="${cart.value.id}"/>
                                    <ul id="pic_list" style="text-align: center">
                                        <li style="width: 180px;text-align: left;float: left">${cart.value.name}</li>
                                        <li style="width: 100px">${cart.value.count}</li>
                                        <li style="width: 100px">${cart.value.totalPrice}</li>
                                        <li style="width: 200px;text-align: center"></li>
                                        <li style="width: 70px;text-align: center;float: right">未发货</li>
                                    </ul>
                                    </c:forEach>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- shop main wrapper end -->
            </div>
        </div>
    </div>
    <!-- page main wrapper end -->
</main>
<!-- main wrapper end -->

<!-- Start Footer Area Wrapper -->
<footer class="footer-wrapper">

    <!-- footer widget area start -->
    <div class="footer-widget-area">
        <div class="container">
            <div class="footer-widget-inner section-space">
                <div class="row mbn-30">
                    <!-- footer widget item start -->
                    <div class="col-lg-5 col-md-6 col-sm-8">
                        <div class="footer-widget-item mb-30">
                            <div class="footer-widget-title">
                                <h5>My account</h5>
                            </div>
                            <ul class="footer-widget-body accout-widget">
                                <li class="address">
                                    <em><i class="lnr lnr-map-marker"></i></em>
                                    184 Main Rd E, St Albans VIC 3021, Australia
                                </li>
                                <li class="email">
                                    <em><i class="lnr lnr-envelope"></i>Mail us: </em>
                                    <a href="mailto:test@yourdomain.com">yourmail@gmail.com</a>
                                </li>
                                <li class="phone">
                                    <em><i class="lnr lnr-phone-handset"></i> Phones: </em>
                                    <a href="tel:(012)800456789-987">(012) 800 456 789-987</a>
                                </li>
                            </ul>
                            <div class="payment-method">
                                <img src="assets/img/payment-pic.png" alt="payment method">
                            </div>
                        </div>
                    </div>
                    <!-- footer widget item end -->

                    <!-- footer widget item start -->
                    <div class="col-lg-2 col-md-6 col-sm-4">
                        <div class="footer-widget-item mb-30">
                            <div class="footer-widget-title">
                                <h5>categories</h5>
                            </div>
                            <ul class="footer-widget-body">
                                <li><a href="#">Ecommerce</a></li>
                                <li><a href="#">shopify</a></li>
                                <li><a href="#">Prestashop</a></li>
                                <li><a href="#">Opencart</a></li>
                                <li><a href="#">Magento</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- footer widget item end -->

                    <!-- footer widget item start -->
                    <div class="col-lg-2 col-md-6 col-sm-6">
                        <div class="footer-widget-item mb-30">
                            <div class="footer-widget-title">
                                <h5>information</h5>
                            </div>
                            <ul class="footer-widget-body">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">About Us</a></li>
                                <li><a href="#">Contact Us</a></li>
                                <li><a href="#">Exchanges</a></li>
                                <li><a href="#">Shipping</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- footer widget item end -->

                    <!-- footer widget item start -->
                    <div class="col-lg-2 offset-lg-1 col-md-6 col-sm-6">
                        <div class="footer-widget-item mb-30">
                            <div class="footer-widget-title">
                                <h5>Quick Links</h5>
                            </div>
                            <ul class="footer-widget-body">
                                <li><a href="#">Store Location</a></li>
                                <li><a href="#">My Account</a></li>
                                <li><a href="#">Orders Tracking</a></li>
                                <li><a href="#">Size Guide</a></li>
                                <li><a href="#">Contact Us</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- footer widget item end -->
                </div>
            </div>
        </div>
    </div>
    <!-- footer widget area end -->

    <!-- footer bottom area start -->
    <div class="footer-bottom-area">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 order-1 order-md-2">
                    <div class="footer-social-link">
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-linkedin"></i></a>
                        <a href="#"><i class="fa fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer bottom area end -->

</footer>
<!-- End Footer Area Wrapper -->

<!-- Quick view modal start -->
<div class="modal" id="quick_view">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <!-- product details inner end -->
                <div class="product-details-inner">
                    <div class="row">
                        <div class="col-lg-5 col-md-5">
                            <div class="product-large-slider">
                                <div class="pro-large-img">
                                    <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/product/product-details-img1.jpg" alt="product-details" />
                                </div>
                                <div class="pro-large-img">
                                    <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/product/product-details-img2.jpg" alt="product-details" />
                                </div>
                                <div class="pro-large-img">
                                    <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/product/product-details-img3.jpg" alt="product-details" />
                                </div>
                                <div class="pro-large-img">
                                    <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/product/product-details-img4.jpg" alt="product-details" />
                                </div>
                            </div>
                            <div class="pro-nav slick-row-10 slick-arrow-style">
                                <div class="pro-nav-thumb">
                                    <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/product/product-details-img1.jpg" alt="product-details" />
                                </div>
                                <div class="pro-nav-thumb">
                                    <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/product/product-details-img2.jpg" alt="product-details" />
                                </div>
                                <div class="pro-nav-thumb">
                                    <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/product/product-details-img3.jpg" alt="product-details" />
                                </div>
                                <div class="pro-nav-thumb">
                                    <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/product/product-details-img4.jpg" alt="product-details" />
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7 col-md-7">
                            <div class="product-details-des quick-details">
                                <h3 class="product-name">Orchid flower white stick</h3>
                                <div class="ratings d-flex">
                                    <span><i class="lnr lnr-star"></i></span>
                                    <span><i class="lnr lnr-star"></i></span>
                                    <span><i class="lnr lnr-star"></i></span>
                                    <span><i class="lnr lnr-star"></i></span>
                                    <span><i class="lnr lnr-star"></i></span>
                                    <div class="pro-review">
                                        <span>1 Reviews</span>
                                    </div>
                                </div>
                                <div class="price-box">
                                    <span class="price-regular">$70.00</span>
                                    <span class="price-old"><del>$90.00</del></span>
                                </div>
                                <h5 class="offer-text"><strong>Hurry up</strong>! offer ends in:</h5>
                                <div class="product-countdown" data-countdown="2019/08/25"></div>
                                <div class="availability">
                                    <i class="fa fa-check-circle"></i>
                                    <span>200 in stock</span>
                                </div>
                                <p class="pro-desc">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                                    eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
                                <div class="quantity-cart-box d-flex align-items-center">
                                    <h5>qty:</h5>
                                    <div class="quantity">
                                        <div class="pro-qty"><input type="text" value="1"></div>
                                    </div>
                                    <div class="action_link">
                                        <a class="btn btn-cart2" href="#">Add to cart</a>
                                    </div>
                                </div>
                                <div class="useful-links">
                                    <a href="#" data-toggle="tooltip" title="Compare"><i
                                            class="lnr lnr-sync"></i>compare</a>
                                    <a href="#" data-toggle="tooltip" title="Wishlist"><i
                                            class="lnr lnr-heart"></i>wishlist</a>
                                </div>
                                <div class="like-icon">
                                    <a class="facebook" href="#"><i class="fa fa-facebook"></i>like</a>
                                    <a class="twitter" href="#"><i class="fa fa-twitter"></i>tweet</a>
                                    <a class="pinterest" href="#"><i class="fa fa-pinterest"></i>save</a>
                                    <a class="google" href="#"><i class="fa fa-google-plus"></i>share</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- product details inner end -->
            </div>
        </div>
    </div>
</div>
<!-- Quick view modal end -->

<!-- offcanvas search form start -->
<div class="offcanvas-search-wrapper">
    <div class="offcanvas-search-inner">
        <div class="offcanvas-close">
            <i class="lnr lnr-cross"></i>
        </div>
        <div class="container">
            <div class="offcanvas-search-box">
                <form class="d-flex bdr-bottom w-100">
                    <input type="text" placeholder="Search entire storage here...">
                    <button class="search-btn"><i class="lnr lnr-magnifier"></i>search</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- offcanvas search form end -->

<!-- offcanvas mini cart start -->
<%@include file="cart.jsp"%>
<%--<div class="offcanvas-minicart-wrapper">--%>
<%--    <div class="minicart-inner">--%>
<%--        <div class="offcanvas-overlay"></div>--%>
<%--        <div class="minicart-inner-content">--%>
<%--            <div class="minicart-close">--%>
<%--                <i class="lnr lnr-cross"></i>--%>
<%--            </div>--%>
<%--            <div class="minicart-content-box">--%>
<%--                <div class="minicart-item-wrapper">--%>
<%--                    <ul>--%>

<%--                        <li class="minicart-item">--%>
<%--                            <div class="minicart-thumb">--%>
<%--                                <a href="product-details.html">--%>
<%--                                    <img src="${pageContext.request.contextPath}/pages/Floda/assets/img/cart/cart-1.jpg" alt="product">--%>
<%--                                </a>--%>
<%--                            </div>--%>
<%--                            <div class="minicart-content">--%>
<%--                                <h3 class="product-name">名字</h3>--%>
<%--                                <p>--%>
<%--                                    <span class="cart-quantity">1<strong>&times;</strong></span>--%>
<%--                                    <span class="cart-price">￥100.00</span>--%>
<%--                                </p>--%>
<%--                            </div>--%>
<%--                            <button class="minicart-remove"><i class="lnr lnr-cross"></i></button>--%>
<%--                        </li>--%>

<%--                    </ul>--%>
<%--                </div>--%>

<%--                <div class="minicart-pricing-box">--%>
<%--                    <ul>--%>
<%--                        <li>--%>
<%--                            <span>数量</span>--%>
<%--                            <span><strong>2</strong></span>--%>
<%--                        </li>--%>

<%--                        <li class="total">--%>
<%--                            <span>总价</span>--%>
<%--                            <span><strong>$10.00</strong></span>--%>
<%--                        </li>--%>
<%--                    </ul>--%>
<%--                </div>--%>

<%--                <div class="minicart-button">--%>
<%--                    <a href="#"><i class="fa fa-share"></i>结算</a>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</div>--%>
<!-- offcanvas mini cart end -->

<!-- Scroll to top start -->
<div class="scroll-top not-visible">
    <i class="fa fa-angle-up"></i>
</div>
<!-- Scroll to Top End -->

<!-- All vendor & plugins & active js include here -->
<!--All Vendor Js -->
<script src="${pageContext.request.contextPath}/pages/Floda/assets/js/vendor.js"></script>
<!-- Active Js -->
<script src="${pageContext.request.contextPath}/pages/Floda/assets/js/active.js"></script>
</body>
<script type="text/javascript">
    //多张
    document.getElementById("photo").addEventListener("change",function(){
        var files = this.files;
        var oUL = document.getElementById("divUL");
        oUL.innerHTML = "";
        for(var i = 0;i < files.length;i++){
            oUL.innerHTML += '<div><img id="img'+i+'" /></div>'
            var imgList = document.getElementById("img"+i);
            imgList.style.height = "100px";
            imgList.style.width = "100px";
            imgList.src = window.URL.createObjectURL(files[i]);
        }
    })
</script>
</html>
